<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta charset="utf-8" />
  <title>WeatherStar 4000+</title>
  <meta name="description" content="Web based WeatherStar 4000 simulator that reports current and forecast weather conditions plus a few extras!" />
  <meta name="keywords" content="WeatherStar 4000+" />
  <meta name="author" content="Matt Walsh" />
  <meta name="application-name" content="WeatherStar 4000+" />
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1">
  <meta name="mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  <link rel="manifest" href="manifest.json" />
  <link rel="icon" href="images/logos/logo192.png" />
  <link rel="apple-touch-icon" sizes="180x180" href="images/logos/app-icon-180.png" />
  <meta property="og:image" content="https://weatherstar.netbymatt.com/images/social/1200x600.png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="627">
  <link rel="prefetch" href="fonts/Star4000.woff" as="font" type="font/woff" crossorigin>
  <link rel="prefetch" href="fonts/Star4000 Extended.woff" as="font" type="font/woff" crossorigin>
  <link rel="prefetch" href="fonts/Star4000 Large.woff" as="font" type="font/woff" crossorigin>
  <link rel="prefetch" href="fonts/Star4000 Small.woff" as="font" type="font/woff" crossorigin>
  <% if (typeof serverAvailable !== 'undefined' && serverAvailable) { %>
  <script>
    window.WS4KP_SERVER_AVAILABLE = true;
  </script>
  <% } %>

  <% if (production) { %>
  <link rel="stylesheet" type="text/css" href="resources/ws.min.css?_=<%=production%>" />
  <script type="text/javascript" src="resources/vendor.min.js?_=<%=production%>"></script>
  <script type="text/javascript" src="resources/ws.min.js?_=<%=production%>"></script>
  <script type="text/javascript">
    const OVERRIDES = <%- JSON.stringify(OVERRIDES ?? {}) %>;
  </script>
  <% } else { %>
  <link rel="stylesheet" type="text/css" href="styles/ws.min.css" />
  <!--<script type="text/javascript">const OVERRIDES={};</script>-->
  <script type="text/javascript">
    OVERRIDES = <%- JSON.stringify(OVERRIDES ?? {}) %>;
  </script>
  <script type="text/javascript" src="scripts/vendor/auto/nosleep.js"></script>
  <script type="text/javascript" src="scripts/vendor/auto/swiped-events.js"></script>
  <script type="text/javascript" src="scripts/vendor/auto/suncalc.js"></script>
  <script type="module" src="scripts/modules/hazards.mjs"></script>
  <script type="module" src="scripts/modules/currentweatherscroll.mjs"></script>
  <script type="module" src="scripts/modules/currentweather.mjs"></script>
  <script type="module" src="scripts/modules/almanac.mjs"></script>
  <script type="module" src="scripts/modules/spc-outlook.mjs"></script>
  <script type="module" src="scripts/modules/icons.mjs"></script>
  <script type="module" src="scripts/modules/extendedforecast.mjs"></script>
  <script type="module" src="scripts/modules/hourly-graph.mjs"></script>
  <script type="module" src="scripts/modules/hourly.mjs"></script>
  <script type="module" src="scripts/modules/latestobservations.mjs"></script>
  <script type="module" src="scripts/modules/localforecast.mjs"></script>
  <script type="module" src="scripts/modules/radar.mjs"></script>
  <script type="module" src="scripts/modules/regionalforecast.mjs"></script>
  <script type="module" src="scripts/modules/travelforecast.mjs"></script>
  <script type="module" src="scripts/modules/progress.mjs"></script>
  <script type="module" src="scripts/modules/radar.mjs"></script>
  <script type="module" src="scripts/modules/settings.mjs"></script>
  <script type="module" src="scripts/modules/media.mjs"></script>
  <script type="module" src="scripts/modules/custom-rss-feed.mjs"></script>
  <script type="module" src="scripts/index.mjs"></script>
  <% } %>

</head>

<body <% if (query && query['settings-kiosk-checkbox'] === 'true' ) { %>class="kiosk" <% }%>>

  <div id="divQuery">
    <input id="txtLocation" type="text" value="" placeholder="ZIP Code or City, State" data-1p-ignore />
    <div class="buttons">
      <button id="btnGetGps" type="button" title="Get GPS Location"><img src="images/nav/ic_gps_fixed_black_18dp_1x.png" class="light" />
        <img src="images/nav/ic_gps_fixed_white_18dp_1x.png" class="dark" />
      </button>
      <button id="btnGetLatLng" type="submit">GO</button>
      <button id="btnClearQuery" type="reset">Reset</button>
    </div>
  </div>
  <div id="version" style="display:none">
    <%- version %>
  </div>

  <div id="divTwc">
    <div id="divTwcMain">
      <div id="container">
        <div id="loading" width="640" height="480">
          <div>
            <div class="title">WeatherStar 4000+</div>
            <div class="version">v<%- version %></div>
            <div class="instructions">Enter your location above to continue</div>
          </div>
        </div>
        <div id="progress-html" class="weather-display">
          <%- include('partials/progress.ejs') %>
        </div>
        <div id="hourly-html" class="weather-display">
          <%- include('partials/hourly.ejs') %>
        </div>
        <div id="hourly-graph-html" class="weather-display">
          <%- include('partials/hourly-graph.ejs') %>
        </div>
        <div id="travel-html" class="weather-display">
          <%- include('partials/travel.ejs') %>
        </div>
        <div id="current-weather-html" class="weather-display">
          <%- include('partials/current-weather.ejs') %>
        </div>
        <div id="local-forecast-html" class="weather-display">
          <%- include('partials/local-forecast.ejs') %>
        </div>
        <div id="latest-observations-html" class="weather-display">
          <%- include('partials/latest-observations.ejs') %>
        </div>
        <div id="regional-forecast-html" class="weather-display">
          <%- include('partials/regional-forecast.ejs') %>
        </div>
        <div id="almanac-html" class="weather-display">
          <%- include('partials/almanac.ejs') %>
        </div>
        <div id="spc-outlook-html" class="weather-display">
          <%- include('partials/spc-outlook.ejs') %>
        </div>
        <div id="extended-forecast-html" class="weather-display">
          <%- include('partials/extended-forecast.ejs') %>
        </div>
        <div id="radar-html" class="weather-display">
          <%- include('partials/radar.ejs') %>
        </div>
        <div id="hazards-html" class="weather-display">
          <%- include('partials/hazards.ejs') %>
        </div>
        <%- include('partials/scroll.ejs') %>
      </div>
    </div>
    <div id="divTwcBottom">
      <div id="divTwcBottomLeft">
        <img id="NavigateMenu" class="navButton" src="images/nav/ic_menu_white_24dp_2x.png" title="Menu" />
        <img id="NavigatePrevious" class="navButton" src="images/nav/ic_skip_previous_white_24dp_2x.png" title="Previous" />
        <img id="NavigateNext" class="navButton" src="images/nav/ic_skip_next_white_24dp_2x.png" title="Next" />
        <img id="NavigatePlay" class="navButton" src="images/nav/ic_play_arrow_white_24dp_2x.png" title="Play" />
      </div>
      <div id="divTwcBottomMiddle">
        <img id="NavigateRefresh" class="navButton" src="images/nav/ic_refresh_white_24dp_2x.png" title="Refresh" />
      </div>
      <div id="divTwcBottomRight">
        <div id="ToggleMediaContainer">
          <div id="ToggleMedia">
            <img class="navButton off" src="images/nav/ic_volume_off_white_24dp_2x.png" title="Unmute" />
            <img class="navButton on" src="images/nav/ic_volume_on_white_24dp_2x.png" title="Volume" />
          </div>
          <div class="volume-slider">
            <input type="range" min="1" max="100" value="75" /><br>
            <img class="navButton" src="images/nav/ic_volume_off_white_24dp_2x.png" title="Mute" />
          </div>
        </div>
        <div id="ToggleScanlines">
          <img class="navButton off" src="images/nav/ic_scanlines_off_white_24dp_2x.png" title="Scan lines on" />
          <img class="navButton on" src="images/nav/ic_scanlines_on_white_24dp_2x.png" title="Scan lines off" />
        </div>
        <img id="ToggleFullScreen" class="navButton" src="images/nav/ic_fullscreen_white_24dp_2x.png" title="Enter Fullscreen" />
      </div>
    </div>
  </div>

  <div class="content-wrapper">
    <br />

    <div class="info">
      <a href="https://github.com/netbymatt/ws4kp#weatherstar-4000">More information</a>
    </div>
    <div class="media"></div>

    <div class='heading'>Selected displays</div>
    <div id='enabledDisplays'>

    </div>

    <div class='heading'>Settings</div>
    <div id='settings'>
    </div>

    <div class='heading'>Sharing</div>
    <div class='info'>
      <a href='' id='share-link'>Copy Permalink</a> <span id="share-link-copied">Link copied to clipboard!</span>
      <div id="share-link-instructions">
        Copy this long URL:
        <input type='text' id="share-link-url">
      </div>
    </div>

    <div class='heading'>Headend Information</div>
    <div id="divInfo">
      <div class="header">Location:</div>
      <div class="header"><span id="spanCity"></span> <span id="spanState"></span></div>
      <div class="header">Station Id:</div>
      <div class="header"><span id="spanStationId"></span></div>
      <div class="header">Radar Id:</div>
      <div class="header"><span id="spanRadarId"></span></div>
      <div class="header">Zone Id:</div>
      <div class="header"><span id="spanZoneId"></span></div>
      <div class="header">Office Id:</div>
      <div class="header"><span id="spanOfficeId"></span></div>
      <div class="header">Grid X,Y:</div>
      <div class="header"><span id="spanGridPoint"></span></div>
      <div class="header">Music:</div>
      <div class="header"><span id="musicTrack">Not playing</span></div>
      <div class="header">Ws4kp Version:</div>
      <div class="header"><span><%- version %></span></div>
    </div>
  </div>

</body>

</html>